<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>动态表格</title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<style>
			td,
			th {
				padding: 10px;
			}
		</style>
		<script>
			$(function() {
				/*给遍历表格按钮绑定点击事件*/
				$("#blBtn").click(function() {
						var tab = $("#myTable"); //获取到了表格的jQuery对象
						//获取表格的所有行 
						//tab.children()获取的是表格tbody，
						//表格默认把所有tr行用tbody包裹，使用两次childer即可
						var trArr=tab.children().children(); 
						//遍历行
						for(var i=0;i<trArr.length;i++){ 
							var trObj=$(trArr[i]); /*使用$包裹，将js对象转出jq对象*/
							//获取每行的单元格的集合
							var tdArr=$(trObj.children()); /*同样要转成jq对象*/
							//遍历每个单元格 
							var str=""; 
							for(var j=0;j<tdArr.length;j++){ 
								var tdObj=$(tdArr[j]); /*列集合中每一个js对象转出jq*/
								var html=tdObj.html();/*获取单元格内所有内容包括标签*/
								//获取每个单元格中的内容
								str += html+"--";
							}
							console.log(str);
						}
				});
				/*给添加按钮绑定点击事件
				  获取table，给table表格append追加一个行元素
				 * */
				$("#addBtn").click(function() {
					var tab = $("#myTable>tbody"); //获取到了表格中tbody元素的jQuery对象 
					
					var num = parseInt(Math.random() * 10) + 1;/*产生随机数*/
					var tr = ' <tr > '+ 
						 			'<td >' +num+'</td>'+ 
						 			'<td >小熊饼干 '+num+' </td>'+ 
									'<td >￥125</td>'+  
						 			'<td >1</td>'+
						 			'<td ><button name ="delBtn" >删除 </button></td > '+ 
							' </tr>';
					tab.append(tr); /*向表格内部末尾追加一个行元素使用append*/
				});
			
				//此种绑定事件的方式对动态添加的元素不生效
				/*$("button[name='delBtn']").click(function(){ 
				 * 	alert("aaaa"); 
				 *});*/ 
			 
				 $(document).on("click", "button[name='delBtn']", function() {
						$(this).parent().parent().remove();
				});
		});</script>
	</head>

	<body>
		<button type="button" id="blBtn">遍历表格</button> 
		<button type="button" id="addBtn">添加</button>
		<table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" style="text-align: center;">
			<tr>
				<th>序号</th>
				<th>名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>总计</th>
			</tr>
			<tr>
				<td>1</td>
				<td>小熊饼干1</td>
				<td>￥125</td>
				<td>1</td>
				<td><button name="delBtn">删除</button></td>
			</tr>
			<tr>
				<td>2</td>
				<td>小熊饼干2</td>
				<td>￥125</td>
				<td>1</td>
				<td><button name="delBtn">删除</button></td>
			</tr>

		</table>
	</body>

</html>